<template>
  <div class="home">
    <jm-head></jm-head>


    <section class="center" id="center">

      <section class="user_info_show">
        <section class="user_info_show_item">
          <img class="avatar" :src="$store.state.baseImgUrl+$store.state.userInfo.avatar" alt="" id="avatar">
        </section>
        <section class="user_info_show_item">
          <span class="nick">{{$store.state.userInfo.nick}}</span>
        </section>
        <section class="user_info_show_item">
          <span class="email">{{$store.state.userInfo.email}}</span>
        </section>
        <section class="user_info_show_item">
          <button class="setting" @click="updateUserInfo">设置</button>
        </section>

      </section>

      <section class="nav">
        <section class="nav-item"
                 @click="selected = 1">
          <span :class="{'is-selected': selected === 1}">我分享的文章</span>
        </section>
        <section class="nav-item"
                 @click="selected = 2">
          <span :class="{'is-selected': selected === 2}">我创建的空间</span>
        </section>
      </section>

      <section class="content">
        <ul class="post_list_ul" v-infinite-scroll="articleLoadMore"
            infinite-scroll-disabled="articleLoading"
            infinite-scroll-distance="10" v-show="this.selected === 1" >
          <li class="post_list_li" v-for="item in artilceList" :id="item.id" :key="item.id">
            <section class="li_header">
              <section class="li_header_left">
                <img :src="$store.state.baseImgUrl+item.authorAvatar" alt="" class="avatar">
              </section>
              <section class="li_header_center">
                <span class="nick">{{item.authorNick}}</span>
              </section>
              <section class="li_header_right">
                <span class="datetime">{{item.createTime | time}}</span>
              </section>
            </section>

            <section class="li_center" @click="showArticle(item)">
              <section :class="[item.cover3 !== null && item.cover3 !==''? 'li_center_container' : 'li_center_container_active']">
                <span class="container" v-html="item.title"></span>
                <span v-show="item.cover1 !== null && item.cover1 !==''" class="img_show">
                <img v-show="item.cover1 !== null && item.cover1 !==''" :src="item.cover1" alt="" class="img_show_item">
                <img v-show="item.cover3 !== null && item.cover3 !==''" :src="item.cover2" alt="" class="img_show_item">
                <img v-show="item.cover3 !== null && item.cover3 !==''" :src="item.cover3" alt="" class="img_show_item">
              </span>
              </section>
            </section>

            <section class="li_footer">
              <section class="li_footer_item">
                <i class="icon_style iconfont icon-zan">点赞：</i>
                <span>{{item.upvoteCount}}</span>
              </section>
              <section class="li_footer_item">
                <i class="icon_style iconfont icon-xiaoxizhongxin">评论：</i>
                <span>{{item.commentCount}}</span>
              </section>
              <section class="li_footer_item">
                <i class="icon_style iconfont icon-jushoucang">收藏：</i>
                <span>{{item.likeCount}}</span>
              </section>
            </section>

          </li>
        </ul>
      </section>

      <section class="content">
        <ul class="post_list_ul" v-infinite-scroll="roomLoadMore"
            infinite-scroll-disabled="roomLoading"
            infinite-scroll-distance="10" v-show="this.selected === 2">
          <li class="room_post_list_li" v-for="item in roomList" :id="item.id" :key="item.id" @click="showRoomDetail(item)">
            <section class="li_header">
              <section class="cover_box">
                <img :src="$store.state.baseImgUrl+item.cover" alt="" class="cover_img">
              </section>
            </section>

            <section class="li_center">
              <section class="li_center_item"><span>空间名：</span> <span>{{item.name}}</span></section>
              <section class="li_center_item">
            <span class="li_center_item_id">
              <span>空间ID：</span> <span>{{item.id}}</span>
            </span>
                <span class="li_center_item_type" v-show="item.type === -1">
              <i class="icon_style iconfont icon-yonghu"></i>
              <span>个人空间</span>
            </span>
                <span class="li_center_item_type" v-show="item.type === 0">
              <i class="icon_style iconfont icon-unlock_fill"></i>
              <span>公共空间</span>
            </span>
                <span class="li_center_item_type" v-show="item.type === 1">
              <i class="icon_style iconfont icon-lock_fill"></i>
              <span>私人空间</span>
            </span>

              </section>
              <section class="li_center_item"><span>{{item.signature}}</span></section>
            </section>

          </li>
        </ul>
      </section>


      <p class="load_content" v-show="!startShowLoading && showLoading">
        <spinner class="load_icon" type="snake"></spinner>
      </p>
    </section>


    <jm-footer></jm-footer>

    <transition name="loading">
      <spinner class="load_icon" type="snake" v-show="startShowLoading"></spinner>
      <!--<loading v-show="showLoading"></loading>-->
    </transition>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>



  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import JmHead from '../../components/header/Head';
  import JmFooter from '../../components/footer/Footer';
  import { Spinner,Toast } from 'mint-ui'


  export default {
    data () {
      return {
        selected:1,
        artilceList:[],
        articleOffset: 0,
        result: null,
        preventRepeat: false,
        showLoading: true,
        startShowLoading: true,
        articleLoading: false,
        roomLoading: false,
        roomList: [],
        roomOffset: 0,
        show: false,  //展示图片
        showLoad: false, //展示加载
        avatarUrl: null,
      }
    },
    mounted(){
      // 如果从详情返回并且之前存有对应的查询条件和参数
      // 则直接渲染之前的数据
      if (window.window.sessionStorage.artilceList || window.window.sessionStorage.roomList) {
        this.artilceList = JSON.parse(window.window.sessionStorage.artilceList);
        this.articleOffset = this.artilceList.length;
        console.log(this.artilceList);
        this.roomList = JSON.parse(window.window.sessionStorage.roomList);
        this.roomOffset = this.roomList.length;
        console.log(this.roomList);
        this.selected = parseInt(window.window.sessionStorage.selected);
        console.log(this.selected);
        this.$nextTick(() => $(window).scrollTop(window.window.sessionStorage.scrollTop));
      } else {
      }
    },
    beforeRouteLeave(to, from, next) {
      // 如果跳转到详情页面，则记录关键数据
      // 方便从详情页面返回到该页面的时候继续加载之前位置的数据
      if (to.path === '/room' || to.path === '/article' ) {
        // 当前滚动条位置
        window.window.sessionStorage.scrollTop = $(window).scrollTop();
        // 当前页面数据
        window.window.sessionStorage.artilceList = JSON.stringify(this.artilceList);
        window.window.sessionStorage.roomList = JSON.stringify(this.roomList);
        window.window.sessionStorage.selected = this.selected;
      }
      $(window).off('scroll');
      next();
    },
    beforeRouteEnter(to, from, next) {
      if (from.path !== '/room' && from.path !== '/article') {
        // 页面切换移除之前记录的数据集
//        if (window.window.sessionStorage.scrollTop) {
        window.window.sessionStorage.removeItem('artilceList');
        window.window.sessionStorage.removeItem('roomList');
        window.window.sessionStorage.removeItem('selected');
//        }
      }
      next();
    },
    computed: {
    },
    methods: {
      ...mapMutations([
        'SAVE_ARTICLE',
        'UPDATE_AVATAR',
        'SAVE_ROOM'
      ]),
      async articleLoadMore(){
        console.log("load....");

        this.articleLoading = true;

        //获取信息
        let res = null;
        let url = '/v1/article?userId=' + this.$store.state.userInfo.userId
            +'&author=' + this.$store.state.userInfo.userId
          + '&start=' + this.articleOffset
          + '&length=' + this.$store.state.length
        await this.axios.get(url)
          .then(response => {
            res = response.data;
          })
        if (res.success){
          this.startShowLoading = false;
        }
        if (res.result.length > 0){
          this.articleOffset += res.result.length;
          this.artilceList = [...this.artilceList, ...res.result];
          this.articleLoading = false;
        }


        if (res.result.length < this.$store.state.length) {
          this.showLoading = false;
          return
        }

      },

      async roomLoadMore(){

        this.roomLoading = true;

        //获取信息
        let res = null;

        let url = '/v1/room?creatorId=' + this.$store.state.userInfo.userId
          + '&start=' + this.roomOffset
          + '&length=' + this.$store.state.length

        await this.axios.get(url)
          .then(response => {
            res = response.data;
          })
//        console.log(this.result);
        if (res.success){
          this.startShowLoading = false;
        }else{
          let instance = Toast({message: '网络连接失败', className: 'toast'});
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
        if (res.result.length > 0){
          this.roomOffset += res.result.length;
          this.roomList = [...this.roomList, ...res.result];
          this.roomLoading = false;
        }


        if (res.result.length < this.$store.state.length) {
          this.showLoading = false;
          return
        }
      },

      showArticle(item){
        this.SAVE_ARTICLE(item);
        this.preventRepeat = false;
        this.$router.push('/article');

      },
      showRoomDetail(item){
        this.SAVE_ROOM(item);
        this.preventRepeat = false;
        this.$router.push('/room');
      },



      updateUserInfo(){
        this.$router.push('/user_info');
      }
    },

    components:{
      Spinner,
      JmHead,
      JmFooter
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .mint-toast-text{
    font-size: 0.6rem;
  }
  .toast{
    min-width: 20%;
    width: 20%;
    span{
      color: #FFFFFF;
    }
  }
  .mint-spinner-snake{
    margin: 0 auto;
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';
  .load_icon{
    position: absolute;
    left: 0;
    right: 0;
    top: 11.18rem;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;

  }

  .load_content{
    height: 45px;
    width: 100%;
  }

  .center{
    padding-top: 1.3rem;
    padding-bottom: 2rem;
    overflow: hidden;
  }

  .user_info_show{
    background-color: #33CCFF;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 1.3rem;
    @include wh(100%, 9rem);

    .user_info_show_item{
      display: flex;

      .avatar{
        display: flex;
        @include wh(4rem, 4rem);
        @include borderRadius(2rem);
        margin: 0rem auto;
        margin-top: 0.5rem;
      }

      .nick{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
        font-weight: bold;
        margin-top: 0.5rem;
      }
      .email{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.4rem;
        font-weight: bold;
      }
      .setting{
        text-align: center;
        background-color: #000;
        width: 5rem;
        height: 1rem;
        margin: auto auto;
        color: #FFFFFF;
        @include borderRadius(0.2rem);
        margin-top: 0.3rem;
        font-size: 0.4rem;
      }

    }
  }

  .nav{
    background-color: #FFFFFF;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 10.3rem;
    @include wh(100%, 0.88rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);

    .nav-item{
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      @include sc(.5rem, #666);

      span{
        margin: auto auto;
      }

      .is-selected{
        color: #33CCFF;
      }
    }
  }

  .content{
    /*display: block;*/
    position: absolute;
    left: 0;
    right: 0;
    top: 11.18rem;
    padding-bottom: 2rem;
    overflow: hidden;
    .post_list_ul{

      .room_post_list_li {
        border: solid 1px #d7dde4;
        @include borderRadius(0.1rem);
        border-bottom: solid 10px #eaeaea;
        box-shadow: 0 -0.026667rem 0.053333rem rgba(0, 0, 0, .1);

        /*单个文章节点头部 开始*/
        .li_header{
          border: solid 1px #d7dde4;
          padding-top: 10px;
          padding-bottom: 10px;
          .cover_box{
            display: flex;
            flex: 1;
            margin: 0 10px;
            .cover_img{
              flex: 1;
              display: flex;
              @include wh(0rem, 5rem);
            }

          }
        }

        .li_center{

          .li_center_item{
            font-size: 0.6rem;
            margin: 2px 10px;

            .li_center_item_id{
              margin-right: 66px;
            }

            .li_center_item_type{
              .icon_style{
                font-size: 0.6rem;
              }
            }
          }

        }


      }

      .post_list_li{
        border: solid 1px #d7dde4;
        @include borderRadius(0.1rem);
        border-bottom: solid 10px #eaeaea;


        /*单个文章节点头部 开始*/
        .li_header{
          @include wh(100%, 1.6rem);
          border-bottom: solid 1px #e3e8ee;
          display: flex;

          .li_header_left{
            display: inline-block;
            margin: 0.1rem 0.5rem;

            .avatar{
              @include wh(1.3rem, 1.3rem);
              @include borderRadius(0.65rem);
            }
          }

          .li_header_center{
            flex-direction: column;
            align-items: center;
            display: inline-block;
            margin: auto 0.2rem;
            .nick{
              margin: auto 0;
              font-size: 0.6rem;
              font-weight: bold;
            }

          }

          .li_header_right{
            flex-direction: column;
            align-items: center;
            display: inline-block;
            margin: auto 0.2rem;

            .datetime{
              margin: auto 0;
              font-size: 0.4rem;
              font-weight: bold;
            }
          }
        }


        /* 单个节点中部，内容部分  开始*/
        .li_center{
          padding: 0.2rem 0.5rem;
          font-size: 0.6rem;

          .li_center_container{
            background-color: #FFFFFF;
            @include borderRadius(10px);
            padding: 0.3rem;

            .img_show{
              display: flex;
              .img_show_item{
                flex: 1;
                display: flex;
                text-align: center;
                flex-direction: column;
                align-items: center;
                margin: 0 0.05rem;
                display: inline-block;
                @include wh(0rem, 3.2rem);
              }
            }
          }
          .li_center_container_active{
            background-color: #FFFFFF;
            @include borderRadius(10px);
            padding: 0.3rem;
            display: flex;

            .container{
              flex: 2;
              display: flex;
              flex-direction: column;
              font-size: 0.6rem;
            }

            .img_show{
              flex: 1;
              display: flex;
              .img_show_item{
                @include wh(100%, 3.2rem);
              }
            }
          }

        }

        /* 单个节点尾部  开始*/
        .li_footer{
          border-top: solid 1px #e3e8ee;
          padding-left: 0.5rem;
          display: flex;

          .li_footer_item{
            flex: 1;
            display: flex;
            /*text-align: center;*/
            /*flex-direction: column;*/
            align-items: center;

            .icon_style{
              display: inline-block;
              font-size: 0.6rem;
            }
            span{
              font-size: 0.6rem;
            }

            .is-selected{
              color: #33CCFF;
            }
          }

        }
      }
    }
  }



  span,input{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }





</style>
